<template>
    <view class="cert-wrap" :data-theme="globPrimary">
        <u-navbar :border-bottom="false" :z-index="10076">
            <view class="search">
                <u-search
                    v-model="title"
                    :show-action="false"
                    height="72"
                    placeholder="输入证书名称"
                    @search="confirm"
                ></u-search>
                <u-icon
                    name="shaixuan"
                    custom-prefix="edu-icon"
                    size="40"
                    :color="globPrimaryColor"
                    @click="popupShow = !popupShow"
                ></u-icon>
            </view>
        </u-navbar>
        <mescroll-body
            ref="mescrollRef"
            :height="mescrollHeight"
            @init="mescrollInit"
            @down="downCallback"
            @up="getBaseCert"
        >
            <view
                class="cert-item"
                v-for="item in certList"
                :key="item.id"
                @click="clickCert(item.id)"
            >
                <view class="source u-border-bottom">来源：{{ item.course_title }}</view>
                <view class="desc">
                    <u-image width="110rpx" height="110rpx"></u-image>
                    <view class="content">
                        <view class="title u-line-1">{{ item.cert_title }}</view>
                        <view class="time">获得时间：{{ item.create_time | timeFormat }}</view>
                        <view class="time">证书编号：{{ item.code }}</view>
                    </view>
                </view>
            </view>
        </mescroll-body>

        <u-popup v-model="popupShow" mode="top">
            <view class="cert-popup">
                <view class="content">
                    <view class="title">按时间筛选</view>
                    <view class="desc">
                        <text class="text"></text>
                        <view
                            class="time"
                            :class="[
                                item.key == 'start' && startTime ? 'active' : '',
                                item.key == 'end' && endTime ? 'active' : '',
                            ]"
                            @click="openPicker(item)"
                            v-for="item in timeList"
                            :key="item.key"
                        >
                            {{ pickerTimeText(item) }}
                        </view>
                    </view>
                </view>
                <view class="bottom">
                    <view class="reset" @click="reset">重置</view>
                    <view class="confirm" @click="confirm">确定</view>
                </view>
            </view>
        </u-popup>
        <u-picker
            v-model="pickerShow"
            mode="time"
            :confirm-color="globPrimaryColor"
            :title="pickerTitle"
            @confirm="pickerConfirm"
        ></u-picker>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
    mixins: [MescrollMixin],
    data() {
        return {
            title: '',
            certList: [],
            popupShow: false,
            pickerShow: false,
            timeList: [
                {
                    key: 'start',
                    title: '开始时间',
                },
                {
                    key: 'end',
                    title: '结束时间',
                },
            ],
            pickerKey: '',
            pickerTitle: '',
            startTime: '',
            endTime: '',
            params: {},
        }
    },
    computed: {
        ...mapGetters({
            globPrimary: 'designSetting/getGlobTheme',
            globPrimaryColor: 'designSetting/getGlobThemeColor',
        }),
        mescrollHeight() {
            let height = 0
            uni.getSystemInfo({
                success(res) {
                    height = res.windowHeight - 44
                },
            })
            return `${height}px`
        },
    },
    created() {
        this.getBaseCert()
    },
    methods: {
        // 数据
        getBaseCert() {
            this.$edu.api.getUserCert(this.params).then((res) => {
                const { data } = res
                this.certList = data
                this.mescroll.endSuccess(data.length, false)
            })
        },
        // 证书详情路由
        clickCert(id) {
            this.$u.route({
                url: '/pageUser/cert/view',
                params: { id },
            })
        },
        // 打开时间选择器
        openPicker(item) {
            this.pickerShow = true
            this.pickerTitle = item.title
            this.pickerKey = item.key
        },
        // 选择筛选的时间
        pickerConfirm(e) {
            if (this.pickerKey == 'start') {
                this.startTime = e.timestamp
            } else {
                this.endTime = e.timestamp
            }
        },
        // 筛选时间的文字
        pickerTimeText(item) {
            if (item.key == 'start') {
                return this.startTime ? this.$u.timeFormat(this.startTime) : item.title
            } else {
                return this.endTime ? this.$u.timeFormat(this.endTime) : item.title
            }
        },
        // 重置筛选
        reset() {
            this.title = ''
            this.startTime = ''
            this.endTime = ''
        },
        // 提交筛选
        confirm() {
            this.popupShow = false
            let query = {
                title: this.title,
                start_time: this.startTime,
                end_time: this.endTime,
            }
            this.params = this.delObjectEmpty(query)
            this.getBaseCert()
        },
        // 去除对象的空值
        delObjectEmpty(data) {
            return Object.keys(data)
                .filter((key) => data[key])
                .reduce((acc, key) => ({ ...acc, [key]: data[key] }), {})
        },
    },
}
</script>

<style lang="scss" scoped>
.cert-wrap {
    .search {
        flex: 1 1 auto;
        display: flex;
        padding-right: 30rpx;
        .u-icon {
            margin-left: 20rpx;
        }
    }
    .cert-item {
        background: #ffffff;
        border-radius: 16rpx;
        margin: 24rpx 30rpx 0;
        .source {
            font-size: 26rpx;
            font-weight: 400;
            color: $edu-main-color;
            padding: 20rpx 30rpx;
        }
        .desc {
            display: flex;
            padding: 28rpx 30rpx;
            .u-image {
                flex: 0 0 110rpx;
            }
        }
        .content {
            width: 500rpx;
            margin-left: 20rpx;
            .title {
                font-size: 30rpx;
                font-weight: 500;
                color: $edu-main-color;
                margin-bottom: 15rpx;
            }
            .time {
                font-size: 22rpx;
                font-weight: 500;
                color: $edu-tips-color;
            }
        }
    }
}
.cert-popup {
    padding-top: 44px;
    .content {
        padding: 50rpx 30rpx;
        .title {
            font-size: 28rpx;
            font-weight: 400;
            color: $edu-tips-color;
        }
        .desc {
            display: flex;
            justify-content: space-between;
            margin-top: 25rpx;
            position: relative;
            .time {
                width: 320rpx;
                height: 64rpx;
                background: #f7f7f7;
                border-radius: 32px;
                font-size: 28rpx;
                font-weight: 400;
                color: $edu-tips-color;
                display: flex;
                align-items: center;
                justify-content: center;
                &.active {
                    @include text-color();
                }
            }
            .text {
                width: 24rpx;
                height: 1px;
                background-color: #b7bac1;
                position: absolute;
                left: 50%;
                margin-left: -12rpx;
                top: 32rpx;
            }
        }
    }
    .bottom {
        display: flex;
        .reset,
        .confirm {
            flex: 1 1 auto;
            height: 88rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
            box-sizing: border-box;
        }
        .reset {
            color: $edu-content-color;
            border-top: 1px solid #f7f7f7;
        }
        .confirm {
            color: #ffffff;
            @include bg-color();
        }
    }
}
</style>
